<template>
    <view>
        <mescroll-uni
            ref="mescrollRef"
            @init="mescrollInit"
            :height="height"
            :down="downOption"
            @down="downRefresh"
            :up="upOption"
            @up="getData">
            <view class="wrapper">
                <view class="list" @click="goDetail(item)" v-for="(item, index) in datas">
                    <view class="title flex-between">
                        <view class="flex-sa-c">
                            <text class="orderNumber">结算单号：{{ item.PeriodSn }}</text>
                        </view>
                        <view class="status">{{ item.StatusName }}</view>
                    </view>
                    <view class="price"
                        >结算金额：<view>￥{{ item.Money }}</view>
                    </view>
                    <view class="time">账期时间：{{ item.StartTime }}至{{ item.EndTime }}</view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>
<script>
import { GetPeriodPage } from "@/pages_supplier/service/api/period.js"
export default {
    props: {
        height: {
            type: String,
            default: "100px",
        },
        requestData: {
            type: Object,
            default: {},
        },
        status: {
            type: Number,
            default: -1,
        },
        index: {
            type: Number,
            default: -1,
        },
        activeIndex: {
            type: Number,
            default: -1,
        },
        fresh: {
            type: Boolean,
            default: false,
        },
    },
    components: {},
    data() {
        return {
            datas: [],
            data: [],
            productList: [],
            param: {},
            downOption: {
                use: true,
            },
        }
    },
    watch: {
        activeIndex(e) {
            this.refresh(this.requestData)
        },
        fresh(e) {
            console.log(123)
            this.refresh(this.requestData)
        },
    },
    mounted() {
        //#ifndef MP
        this.refresh(this.requestData)
        //#endif
        console.log(this.status)
    },
    methods: {
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageSize = page.size
            param.pageIndex = page.num
            param.status = this.status
            param.accountstate = this.requestData.accountstate
            GetPeriodPage(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    if (res.Data && res.Data.length > 0) {
                        res.Data.forEach((item) => {
                            item.StartTime = item.StartTime.split(" ")[0]
                            item.EndTime = item.EndTime.split(" ")[0]
                        })
                    }
                    this.datas = this.datas.concat(res.Data)
                    console.log(this.datas)
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },

        goDetail(item) {
            this.easyGoTo("/pages_supplier/packet/account/detail?id=" + item.ID)
        },
        //刷新
        refresh(requestData) {
            this.downRefresh(requestData, true)
        },
        //刷新
        downRefresh(requestData, isSetParam = false) {
            this.datas = []
            if (isSetParam) {
                this.param = requestData
            }
            if (this.activeIndex == this.index) {
                this.mescroll.resetUpScroll()
            }
        },
    },
}
</script>

<style lang="scss">
.wrapper {
    padding: 24rpx;
}

.list {
    margin-bottom: 16rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 0;

    .title {
        font-size: 28rpx;
        color: $color-gray-1;
        font-weight: bold;
        padding: 0 24rpx 24rpx;
        border-bottom: 1rpx solid #ebebeb;

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }

        .orderNumber {
            font-size: 24rpx;
            font-weight: 500;
            color: $color-gray-3;
        }

        .status {
            text-align: center;
            min-width: 108rpx;
            padding: 0 20rpx;
            height: 44rpx;
            line-height: 44rpx;
            background: #f3f3f4;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: $color-gray-2;
            font-weight: normal;
        }
    }

    .price {
        display: flex;
        font-size: 30rpx;
        color: $color-gray-1;
        padding: 10rpx 24rpx 16rpx;

        view {
            font-weight: bold;
            color: #222a42;
            font-size: 36rpx;
        }
    }

    .time {
        padding: 0 24rpx;
        font-size: 30rpx;
    }
}
</style>
